<template>
  <div class="notifications-container">
    <el-card shadow="never" class="header-card">
      <div class="page-header">
        <div class="header-content">
          <el-icon class="header-icon" :size="28"><Message /></el-icon>
          <div class="header-text">
            <h2>通知消息</h2>
            <p>系统通知和消息管理</p>
          </div>
        </div>
        <div class="header-actions">
          <el-button type="primary" @click="markAllAsRead">
            <el-icon><Check /></el-icon>
            全部已读
          </el-button>
          <el-button @click="clearAll">
            <el-icon><Delete /></el-icon>
            清空消息
          </el-button>
        </div>
      </div>
    </el-card>

    <!-- 消息类型标签 -->
    <el-card shadow="never" class="tabs-card">
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane name="all">
          <template #label>
            <el-badge :value="unreadCount.all" :hidden="unreadCount.all === 0">
              <span>全部消息</span>
            </el-badge>
          </template>
        </el-tab-pane>
        <el-tab-pane name="system">
          <template #label>
            <el-badge :value="unreadCount.system" :hidden="unreadCount.system === 0">
              <span>系统通知</span>
            </el-badge>
          </template>
        </el-tab-pane>
        <el-tab-pane name="approval">
          <template #label>
            <el-badge :value="unreadCount.approval" :hidden="unreadCount.approval === 0">
              <span>审批消息</span>
            </el-badge>
          </template>
        </el-tab-pane>
        <el-tab-pane name="task">
          <template #label>
            <el-badge :value="unreadCount.task" :hidden="unreadCount.task === 0">
              <span>任务提醒</span>
            </el-badge>
          </template>
        </el-tab-pane>
        <el-tab-pane name="meeting">
          <template #label>
            <el-badge :value="unreadCount.meeting" :hidden="unreadCount.meeting === 0">
              <span>会议通知</span>
            </el-badge>
          </template>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 消息列表 -->
    <el-card shadow="never">
      <el-timeline>
        <el-timeline-item
          v-for="item in filteredNotifications"
          :key="item.id"
          :timestamp="item.time"
          :type="getTimelineType(item.type)"
          placement="top"
        >
          <el-card :class="['notification-item', { 'unread': !item.isRead }]" @click="handleRead(item)">
            <div class="notification-header">
              <div class="notification-title">
                <el-icon :size="20" :color="getIconColor(item.type)">
                  <component :is="getIcon(item.type)" />
                </el-icon>
                <span class="title-text">{{ item.title }}</span>
                <el-tag v-if="!item.isRead" type="danger" size="small" effect="dark">未读</el-tag>
              </div>
              <el-button link type="danger" @click.stop="handleDelete(item)">
                <el-icon><Delete /></el-icon>
              </el-button>
            </div>
            <div class="notification-content">{{ item.content }}</div>
            <div class="notification-footer">
              <span class="sender">发送人：{{ item.sender }}</span>
              <el-button v-if="item.link" link type="primary" size="small">
                查看详情 <el-icon><ArrowRight /></el-icon>
              </el-button>
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>

      <el-empty v-if="filteredNotifications.length === 0" description="暂无消息" />

      <el-pagination
        v-if="filteredNotifications.length > 0"
        v-model:current-page="pagination.page"
        v-model:page-size="pagination.size"
        :page-sizes="[10, 20, 50]"
        :total="pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        style="margin-top: 20px; justify-content: flex-end;"
      />
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Message, Check, Delete, Bell, CircleCheck, Calendar, WarningFilled, ArrowRight
} from '@element-plus/icons-vue'

// 当前标签页
const activeTab = ref('all')

// 未读数量统计
const unreadCount = reactive({
  all: 15,
  system: 5,
  approval: 3,
  task: 4,
  meeting: 3
})

// 分页
const pagination = reactive({
  page: 1,
  size: 10,
  total: 50
})

// 通知数据
const notifications = ref([
  {
    id: 1,
    type: 'system',
    title: '系统维护通知',
    content: '系统将于今晚22:00-24:00进行升级维护，届时将无法访问系统，请提前做好工作安排。',
    sender: '系统管理员',
    time: '2024-01-15 10:30:00',
    isRead: false,
    link: true
  },
  {
    id: 2,
    type: 'approval',
    title: '您有一条审批待处理',
    content: '张三提交的请假申请等待您的审批，请及时处理。',
    sender: '审批系统',
    time: '2024-01-15 09:15:00',
    isRead: false,
    link: true
  },
  {
    id: 3,
    type: 'task',
    title: '任务即将到期',
    content: '您的任务"完成月度报表"将于明天截止，请尽快完成。',
    sender: '任务系统',
    time: '2024-01-14 16:30:00',
    isRead: false,
    link: true
  },
  {
    id: 4,
    type: 'meeting',
    title: '会议提醒',
    content: '您有一场会议"月度工作总结会"将于今天下午14:00在会议室A举行。',
    sender: '会议系统',
    time: '2024-01-14 13:00:00',
    isRead: false,
    link: true
  },
  {
    id: 5,
    type: 'system',
    title: '密码到期提醒',
    content: '您的密码将于3天后到期，请及时修改密码。',
    sender: '系统管理员',
    time: '2024-01-13 10:00:00',
    isRead: true,
    link: true
  },
  {
    id: 6,
    type: 'approval',
    title: '审批结果通知',
    content: '您的报销申请已通过审批，金额将在3个工作日内到账。',
    sender: '审批系统',
    time: '2024-01-12 15:20:00',
    isRead: true,
    link: true
  },
  {
    id: 7,
    type: 'task',
    title: '新任务分配',
    content: '李四为您分配了新任务"客户需求分析"，请查看任务详情。',
    sender: '李四',
    time: '2024-01-12 11:00:00',
    isRead: true,
    link: true
  }
])

// 过滤后的通知
const filteredNotifications = computed(() => {
  if (activeTab.value === 'all') {
    return notifications.value
  }
  return notifications.value.filter(item => item.type === activeTab.value)
})

// 方法
const handleTabClick = (tab) => {
  console.log('切换标签', tab)
}

const handleRead = (item) => {
  if (!item.isRead) {
    item.isRead = true
    updateUnreadCount()
    ElMessage.success('已标记为已读')
  }
}

const handleDelete = (item) => {
  ElMessageBox.confirm('确定要删除该消息吗？', '提示', {
    type: 'warning'
  }).then(() => {
    const index = notifications.value.findIndex(n => n.id === item.id)
    if (index > -1) {
      notifications.value.splice(index, 1)
      updateUnreadCount()
      ElMessage.success('删除成功')
    }
  }).catch(() => {})
}

const markAllAsRead = () => {
  notifications.value.forEach(item => {
    item.isRead = true
  })
  updateUnreadCount()
  ElMessage.success('全部标记为已读')
}

const clearAll = () => {
  ElMessageBox.confirm('确定要清空所有消息吗？', '提示', {
    type: 'warning'
  }).then(() => {
    notifications.value = []
    updateUnreadCount()
    ElMessage.success('清空成功')
  }).catch(() => {})
}

const updateUnreadCount = () => {
  unreadCount.all = notifications.value.filter(item => !item.isRead).length
  unreadCount.system = notifications.value.filter(item => item.type === 'system' && !item.isRead).length
  unreadCount.approval = notifications.value.filter(item => item.type === 'approval' && !item.isRead).length
  unreadCount.task = notifications.value.filter(item => item.type === 'task' && !item.isRead).length
  unreadCount.meeting = notifications.value.filter(item => item.type === 'meeting' && !item.isRead).length
}

const getIcon = (type) => {
  const map = {
    system: Bell,
    approval: CircleCheck,
    task: Calendar,
    meeting: Calendar
  }
  return map[type] || Bell
}

const getIconColor = (type) => {
  const map = {
    system: '#409EFF',
    approval: '#67C23A',
    task: '#E6A23C',
    meeting: '#F56C6C'
  }
  return map[type] || '#409EFF'
}

const getTimelineType = (type) => {
  const map = {
    system: 'primary',
    approval: 'success',
    task: 'warning',
    meeting: 'danger'
  }
  return map[type] || 'primary'
}
</script>

<style scoped>
.notifications-container {
  padding: 20px;
}

.header-card {
  margin-bottom: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-icon {
  color: #409EFF;
}

.header-text h2 {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

.header-text p {
  margin: 4px 0 0 0;
  font-size: 14px;
  color: #909399;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.tabs-card {
  margin-bottom: 20px;
}

.notification-item {
  cursor: pointer;
  transition: all 0.3s;
}

.notification-item:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.notification-item.unread {
  background-color: #f0f9ff;
  border-left: 3px solid #409EFF;
}

.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.notification-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 16px;
}

.title-text {
  flex: 1;
}

.notification-content {
  color: #606266;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 12px;
}

.notification-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #909399;
}
</style>

